<template>
        <div class="sliderdiv">

                <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll" >
						<a :class="['mui-control-item' , item.id==0? 'mui-active' : '']" 
                                                 v-for="(item) in sliberBarList" :key="item.name">
							{{item.name}}
						</a>
					</div>
				</div>
			</div>


                        <ul>
                                <router-link tag="li" v-for="item in imageList" :key="item.id" :to="'/home/photoinfo/' + item.id" 
                                class="routerli">
                                        <img :src="item.img" alt="">
                                        <div class="info">
                                           <h1 class="info-title">{{ item.title }}</h1>
                                           <div class="info-body">{{ item.content }}</div>
                                        </div>
                                </router-link>

                        </ul>
        </div>
</template>



<script>

import mui from "../../lib/mui/js/mui.min.js";


export default {
         data:function() {
            return{
                sliberBarList:[],
                imageList:[]
            }
        },

        created() {
                this.textslibarList(),
                this.hasimglist()
        },
        mounted(){
           mui('.mui-scroll-wrapper').scroll({
                        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
         })
        },
        methods: {
            textslibarList() {
              this.sliberBarList.push({id:0,name:'全部'});
                 this.sliberBarList.push({id:1,name:'热点'});
                   this.sliberBarList.push({id:2,name:'北京'});
                     this.sliberBarList.push({id:3,name:'社会'});
                       this.sliberBarList.push({id:4,name:'娱乐'});
                         this.sliberBarList.push({id:5,name:'科技'});
                           this.sliberBarList.push({id:6,name:'动漫'});
                },

                hasimglist() {
                        for(var i = 0;i<5;i++) {
                         this.imageList.push({id:i,img:"../../images/shuijiao.jpg",title:'长风挽西沙古道西风瘦马',content:'夕阳西下断肠人在天涯，问君能有几多愁，恰似一江春水向东流，无言独上西楼，月如沟寂寞梧桐深院锁清秋，剪不断理还乱，别是一番滋味在心头'})
                        }
                }
        },
       
        components: {

        },
        // props:['fullwith']
}
</script>


<style lang="less" scoped>
        * { touch-action: pan-y; } 
        .sliderdiv {
                ul {
                        padding: 10px;
                        margin: 0;
                        padding-bottom: 0;
                        li {
                                list-style: none;
                                background-color: #ccc;
                                text-align: center;
                                position: relative;
                                img {
                                        vertical-align: bottom;
                                        width: 100%;
                                }
                                img[lazy = loading] {
                                      width: 40px;
                                      height: 300px;
                                      margin: auto;          
                                }

                                .info {
                                        background-color: rgba(0, 0, 0, 0.4);
                                        text-align: left;
                                        color: #fff;
                                        max-height: 85px;
                                        position:absolute;
                                        bottom: 0;
                                        .info-title {
                                                font-size: 14px;
                                        }

                                        .info-body {
                                                font-size: 13px;
                                        }

                                }
                        }
                }
        }
       
</style>